<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>align-content</title>
    <style>
      .flex-container {
        display: -webkit-flex;
        display: flex;
        width: auto;
        height: auto;
        background-color: lightgrey;
        flex-wrap: wrap;
      }

      .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>
      align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items,
      但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
    </h1>

    <h2>align-content: stretch 默认。各行将会伸展以占用剩余的空间。</h2>
    <div class="flex-container" style="width: 300px; align-content: stretch">
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
      <div class="flex-item">flex item 4</div>
      <div class="flex-item">flex item 5</div>
      <div class="flex-item">flex item 6</div>
    </div>
    <br />
    <div
      class="flex-container"
      style="width: 300px; height: 300px; align-content: stretch"
    >
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
    </div>

    <h2>align-content: flex-start 各行向弹性盒容器的起始位置堆叠。</h2>
    <div
      class="flex-container"
      style="width: 300px; height: 400px; align-content: flex-start"
    >
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
      <div class="flex-item">flex item 4</div>
    </div>

    <h2>align-content: flex-end 各行向弹性盒容器的结束位置堆叠。</h2>
    <div
      class="flex-container"
      style="width: 300px; height: 400px; align-content: flex-end"
    >
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
    </div>

    <h2>align-content: center 各行向弹性盒容器的中间位置堆叠。</h2>
    <div
      class="flex-container"
      style="width: 300px; height: 400px; align-content: center"
    >
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
    </div>

    <h2>align-content: space-between 各行在弹性盒容器中平均分布。</h2>
    <div
      class="flex-container"
      style="width: 300px; height: 400px; align-content: space-between"
    >
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
    </div>

    <h2>
      align-content: space-around
      各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
    </h2>
    <div
      class="flex-container"
      style="width: 300px; height: 400px; align-content: space-around"
    >
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
    </div>
  </body>
</html>
